<template>
	<div>
		<ul class="panel-ul">
			<li class="panel-li" v-for="(item, index) in array" :key="index">
				<span>{{ item['label'] }}：</span>
				<el-tooltip placement="left-start" v-if="!item.link">
					<div slot="content">{{ item['value'] }}</div>
					<span class="panel-span">{{ item['value'] }}</span>
				</el-tooltip>
				<a @click="link(item)" v-if="item.link">
					<span class="panel-span">查看照片</span>
				</a>
			</li>
		</ul>
		<el-dialog title="查看照片" :visible.sync="dialog" width="500px" append-to-body>
			<el-image style="width: 100%; height: 100%; cursor: pointer" :src="imageUrl" fit="scale-down"></el-image>
		</el-dialog>
	</div>
</template>
<script>
import { BASE_URL } from '@/api';
export default {
	name: 'List',
	props: {
		array: {
			type: Array,
			default: function () {
				return [];
			}
		}
	},
	data() {
		return {
			imageUrl: '',
			dialog: false
		};
	},
	methods: {
		link(item) {
			if (item.link) {
				this.imageUrl = BASE_URL + item.value;
				this.dialog = true;
				console.info(this.imageUrl);
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.panel-ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 1px solid #e8eaec;
	border-radius: 4px;
	height: 500px;
	overflow-x: auto;
	.panel-li {
		position: relative;
		border-bottom: 1px solid #e8eaec;
		padding: 12px 24px;
		.panel-span {
			position: absolute;
			left: 200px;
			width: 380px;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			overflow: hidden;
		}
		a:hover {
			color: #409eff;
		}
	}
}
</style>
